<template>
  <div class="city-address-list">
    <div class="history" v-if="isExhibition">
      <div class="text">搜索历史</div>
    </div>
    <city-address-list-item
      v-for="(item, index) in addressList"
      :key="index"
      :item="item"
    />
    <div
      class="place-history"
      v-if="!addressList.length && placeHistory.length && !isShow"
    >
      <city-address-list-item
        v-for="(item, index) in placeHistory"
        :key="index"
        :item="item"
      />
      <span class="empty" @click="handleEmptyPlaceHistory">清空所有</span>
    </div>
    <div class="no-result" v-if="isShow">很抱歉! 无搜索结果</div>
  </div>
</template>

<script>
import CityAddressListItem from "./CityAddressListItem";
export default {
  data() {
    return {
      isExhibition: true,
      placeHistory: [],
    };
  },
  props: {
    addressList: {
      type: Array,
      default() {
        return [];
      },
    },
    isShow: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  created() {
    this.placeHistory =
      localStorage.getItem("placeHistory") !== null
        ? JSON.parse(localStorage.getItem("placeHistory"))
        : [];
  },
  watch: {
    addressList(value) {
      this.isExhibition = false;
    },
  },
  methods: {
    handleEmptyPlaceHistory() {
      localStorage.removeItem("placeHistory");
      this.placeHistory = [];
    },
  },
  components: {
    CityAddressListItem,
  },
};
</script>
<style lang="less" scoped>
.city-address-list {
  .history {
    font-size: 11px;
    .text {
      padding: 5px 10px;
      border-bottom: 1px solid #e6e5f8;
    }
  }
  .no-result {
    padding: 10px;
    background-color: #fff;
    font-size: 15px;
    color: #222222;
  }
  .place-history {
    .empty {
      display: block;
      text-align: center;
      padding: 20px;
      background-color: #fff;
      font-weight: 500;
      color: #666666;
    }
  }
}
</style>